import React, { Component } from 'react'
import './style.scss'

// 封装一个tab组件，可以切换页面
const Tab = props => {
  console.log( props )
  let { tabs, onChange } = props
  onChange('回传基本的内容')

  const renderTabs = () => {
    return tabs.map(ele => (
      <span key={ele.id}>{ele.label}</span>
    ))
  }
  return (
    <div className="tabs">
      { renderTabs() }
    </div>
  )
}

export default class extends Component {

  constructor (props) {
    super(props)
    this.state = {
      tabs: [
        { id: 1, label: '内容1' },
        { id: 2, label: '内容2' },
        { id: 3, label: '内容3' },
        { id: 4, label: '内容4' }
      ]
    }
  }

  show (e) {
    console.log( e )
  }

  render () {
    let { tabs } = this.state
    return (
      <div className="props">
        <h1>组件间的数据通信问题</h1>
        <Tab tabs={tabs} onChange={e => this.show(e)}/>
      </div>
    )
  }
}